<template>
  <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="70%" :show-ok-btn="false"
    :loading="loading">
    <!-- 审批进度 -->
    <div style="width: 100%; height: 100%">
      <!-- v-on="gridEvents" overflow: hidden -->
      <vxe-grid ref="tableRef" v-bind="gridOptions">
        <template #toolbar_buttons>
          <div style="display: flex; align-items: center;">
            <Input class="s-l" v-model:value="keyword" style="width: 150px"></Input>
            <Button  class="s-l" type="primary" @click="initFn" size="small" :loading="loading">搜索批次号</Button>
          </div>
        </template>
        <template #footer_duiZhangRenMinBiJinE>
          <span style="color: red;">{{ totalObj.duiZhangRenMinBiJinE }}{{ totalObj.duiZhangRenMinBiJinE ? '元' : '' }}</span>
        </template>
        <template #footer_duiZhangJinE>
          <span style="color: red;">{{ totalObj.duiZhangJinE }}</span>
        </template>
        <template #action="{ row }">
          <TableAction outside :actions="createActions(row)" />
        </template>
      </vxe-grid>

    </div>
    <template #centerFooter>
      <Button type="primary" @click="batchExcludeFapiaoAddFn" v-if="!isView">删除排除选项</Button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, h, toRaw, reactive } from 'vue';

import {
  BasicTableProps,
  VxeGridInstance
} from '@/components/VxeTable';
import {
  fapiaoColumns,fapiaoTotalCountFn
} from './role.data';
import {
  checkboxCountFn
} from '../../dknMoneyList/role.data';
import { rules } from './role.data';
import { BasicModal, useModalInner } from '@/components/Modal';

import { BasicTree, TreeItem } from '@/components/Tree';
import {
  getExcludeAffirmList,
  batchExcludeFapiaoRemove,
  oneExcludeFapiaoRemove,
  getExcludeFapiaoList,
  batchExcludeFapiaoAdd
} from '@/api/heng/ywManage';
import { BasicTable, useTable, TableAction, ActionItem } from '@/components/Table';

import {Button, Input, Modal, Timeline, TimelineItem} from 'ant-design-vue';

import { useMessage } from "@/hooks/web/useMessage";
import util from '@/utils/util';
import { t } from '@/hooks/web/useI18n';

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const treeData = ref<TreeItem[]>([]);
const { createMessage } = useMessage();
const mouldMainId = ref("");
const keyword=ref("");
const applyViewShow = ref(false);
const visible = ref(false);
const msgList = ref([]);
const totalObj=ref({duiZhangRenMinBiJinE:0,duiZhangJinE:0});

const tableRef = ref<VxeGridInstance>();
// fapiaoColumns[0].visible = false;
const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: fapiaoColumns,
  filterConfig: {
    remote: true,
  },
  showFooter: true,
  footerData: [
    { skqrNo: '合计' }
  ],
  exportConfig: {},

  // showFooter: true,
  // footerData: [
  //   { orderNo: '合计' }
  // ],
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },

  pagerConfig: {
    enabled: false
  },

});

const loading = ref(false);
const dataList = ref({});

const orderNo=ref("")
const dataJson = ref({});//审批发起后 返回的数据
const types = ref("");
const isView=ref(false);
const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //打开弹层后的回调
  // resetFields();

  dataList.value = [];
  orderNo.value = data.orderNo;
  isView.value = data.isView;
  keyword.value="";
  tableRef.value?.reloadData([])
  initFn();

});

const getTitle = computed(() => ('查看已排除发票核销明细项'));

function initFn() {
  setModalProps({ confirmLoading: true });
  loading.value = true;
  getExcludeFapiaoList({ skqrNo:orderNo.value,xiaoShouDingDanTIDLike:keyword.value }).then(res => {
    if (res && res.code == 200) {
      dataList.value = res.data;
      totalObj.value=fapiaoTotalCountFn(res.data);
      tableRef.value?.reloadData(res.data);
    } else {
      createMessage.success(res.message);
    }
  }).finally(() => {
    loading.value = false;
    setModalProps({ confirmLoading: false });

  })
}

function handleDelete(record: Recordable) {
  //console.log(record);

  oneExcludeFapiaoRemove(record)
    .then((res) => {
      createMessage.success(res.message);
      initFn();
      emit("success");
    })
    .catch((res) => {
      createMessage.error(res.message);
    })
    .finally(() => {
      tableRef.value.commitProxy('reload');
    });
}

function sunccFn(result) {
  if (result && result.code == 200) {
    createMessage.success(result.message);
    closeModal()
    emit('success');
  } else {
    createMessage.error(result.message);
  }

}

function cancelFn() {
  //  tableRef.value.clearValidate();
}

function handleOk() {
  visible.value = false;
}


const createActions = (record) => {
  let actions = [

    {
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '是否确认删除',
        confirm: () => {
          handleDelete(record)
        },
      },
    },
  ];
  if(isView.value){
    actions=[];
  }
  return actions;
};


function  batchExcludeFapiaoAddFn(){
  let list = tableRef.value.getCheckboxRecords();

  if(list.length==0){
    createMessage.error('请勾选排除数据!');
    return false;
  }
  loading.value = true;
  setModalProps({ confirmLoading: true });

  batchExcludeFapiaoRemove({orderNo:orderNo.value,list}).then((res) => {

    if (res && res.code == 200) {
      setModalProps({ confirmLoading: false });

      initFn();

      createMessage.success(res.message);
      emit('success');
    } else {
      createMessage.error(res.message);
    }
  }).finally(()=>{
    loading.value = false;
  })
}

</script>
<style lang="less">
.item-row {
  margin: 0 auto;

  //padding-left: 5%;
  .ant-form-item-label {
    flex: 0 0 28.5%;
    max-width: 28.5%;
  }
}

.lqfp-8 {
  //padding-left: 9% !important;

}
</style>
